<template>
	<div>
		<main-content
			v-if="!showDetail"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.apply_time')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="formTime.time"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.orderStatus"
							style="width: 180px"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-for="item in orderTypeArr"
								:key="item.code"
								:label="item.description"
								:value="Number(item.code)"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						class="flex-row-container"
						label-width="61px"
					>
						<el-input
							v-model="queryData.eventId"
							clearable
							size="medium"
							style="width: 300px"
							:placeholder="$t('common.please_enter')"
							v-symbols
							oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							@blur="cleanBlankSpace('queryData', 'eventId')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('common.wallet_type')}:`"
						class="flex-row-container"
						label-width="74px"
					>
						<el-select
							v-model="queryData.walletType"
							size="medium"
							style="width:115px"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								:label="
									$t(
										'funds.capital_adjustment.real_account_type_1'
									)
								"
								value="17"
							></el-option>
							<el-option
								:label="
									$t(
										'funds.capital_adjustment.real_account_type_2'
									)
								"
								value="18"
							></el-option>
							<el-option
								:label="
									$t(
										'funds.capital_adjustment.real_account_type_3'
									)
								"
								value="21"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.proxy_name')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.userName"
							clearable
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							v-symbols
							oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							@blur="cleanBlankSpace('queryData', 'userName')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>

					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<!-- <el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button> -->
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					highlight-current-row
					:header-cell-style="getRowClass"
					:max-height="tableHeight"
				>
					<el-table-column
						prop="eventId"
						align="center"
						:label="$t('funds.order_no')"
						width="270"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.eventId" :copy="copy">
								{{ scope.row.eventId }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('funds.apply_time')]"
						prop="createdAt"
						align="center"
						:label="$t('funds.apply_time')"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.createdAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('funds.fund_audit.operator')]"
						prop="realName"
						align="center"
						:label="$t('funds.fund_audit.operator')"
						width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.operator || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('funds.proxy_name')]"
						prop="userName"
						align="center"
						:label="$t('funds.proxy_name')"
						width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.userName" :copy="copy">
								{{ scope.row.userName }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('common.belong_merchant')]"
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ merchantFilter(scope.row.merchantId) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="walletType"
						align="center"
						:label="$t('common.wallet_type')"
						min-width="90"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span v-if="scope.row.walletType === 17">
								{{ $t('dict.proxy_wallet_type.0.description') }}
							</span>
							<span v-else-if="scope.row.walletType === 18">
								{{ $t('dict.proxy_wallet_type.1.description') }}
							</span>
							<span v-else-if="scope.row.walletType === 21">
								{{ $t('dict.proxy_wallet_type.2.description') }}
							</span>
							<span v-else>
								-
							</span>
						</template>
					</el-table-column>
					<!-- <el-table-column
							prop="realName"
							align="center"
							:label="$t('funds.proxy_real_name')"
							width="120"
						>
							<template slot-scope="scope">
								{{ scope.row.realName || '-' }}
							</template>
						</el-table-column> -->
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.adjust_type')]
						"
						align="center"
						:label="$t('funds.fund_audit.adjust_type')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									typeFilter(
										scope.row.adjustType,
										'proxyPatchAddAdjustType'
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.order_amount')]
						"
						prop="adjustAmount"
						align="center"
						:label="$t('funds.fund_audit.order_amount')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.adjustAmount ||
										scope.row.adjustAmount === 0
								"
							>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.adjustAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.order_status')]
						"
						prop="orderStatus"
						align="center"
						:label="$t('funds.fund_audit.order_status')"
						:width="getWidth(140, 1.4)"
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.orderStatus ||
										scope.row.orderStatus === 0
								"
							>
								<el-tag
									:type="
										scope.row.orderStatus == 7
											? 'success'
											: 'danger'
									"
								>
									{{ orderStatusMap[scope.row.orderStatus] }}
								</el-tag>
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.audit_time')]
						"
						align="center"
						:label="$t('funds.fund_audit.audit_time')"
						width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Time || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Time || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.audit_cost')]
						"
						align="center"
						:label="$t('funds.fund_audit.audit_cost')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									timeTurner(scope.row.audit1Cost) || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									timeTurner(scope.row.audit2Cost) || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.lock_account')]
						"
						align="center"
						:label="$t('funds.fund_audit.lock_account')"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Operator || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Operator || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('common.actions')]"
						prop="auditStep"
						align="center"
						:label="$t('common.actions')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('408051')"
								type="primary"
								size="medium"
								@click="goDetail(scope.row)"
							>
								{{ $t('common.check') }}
							</el-button>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<!-- <el-table-column
							prop="remark"
							align="center"
							:label="$t('common.remark')"
							width="180"
						>
							<template slot-scope="scope">
								<div v-if="!!scope.row.details && scope.row.details.length">
									<p
										v-if="
											!!scope.row.details[0] && !!scope.row.details[0].remark
										"
									>
										{{ scope.row.details[0].remark }}
									</p>
									<p v-else>-</p>
									<p
										v-if="
											!!scope.row.details[1] && !!scope.row.details[1].remark
										"
									>
										{{ scope.row.details[1].remark }}
									</p>
								</div>
								<span v-else>-</span>
							</template>
						</el-table-column> -->
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<detail
			v-else
			:type="type"
			:rowData="rowData"
			@goBack="goBack"
		></detail>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

const end = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}
const start = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}

export default {
	name: routerNames.agentTopupReviewRecord,
	components: {
		detail: () => import('./components/detail'),
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				id: undefined,
				userName: undefined,
				orderStatus: undefined
			},
			type: true,
			showDetail: false,
			formTime: {
				time: [start(), end()]
			},
			rowData: {},
			name: '',
			activeName: '',
			dataList: [],
			orderTypeArr: [
				{
					code: 7,
					description: this.$t('funds.fund_audit.pass_the_audit')
				},
				{
					code: 5,
					description: this.$t('funds.fund_audit.audit_fail_1')
				},
				{
					code: 6,
					description: this.$t('funds.fund_audit.audit_fail_2')
				}
			],
			orderStatusMap: {
				5: this.$t('funds.fund_audit.audit_fail_1'),
				6: this.$t('funds.fund_audit.audit_fail_2'),
				7: this.$t('funds.fund_audit.pass_the_audit')
			},
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {
				// 申请时间: true,
				// 申请人: true,
				// 代理账号: true,
				// 所属商户: true,
				// 调整类型: true,
				// 申请金额: true,
				// 订单状态: true,
				// 审核时间: true,
				// 审核用时: true,
				// 审核人: true,
				// 操作: true
				[this.$t('funds.apply_time')]: true,
				[this.$t('funds.fund_audit.operator')]: true,
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('funds.fund_audit.adjust_type')]: true,
				[this.$t('funds.fund_audit.order_amount')]: true,
				[this.$t('funds.fund_audit.order_status')]: true,
				[this.$t('funds.fund_audit.audit_time')]: true,
				[this.$t('funds.fund_audit.audit_cost')]: true,
				[this.$t('funds.fund_audit.lock_account')]: true,
				[this.$t('common.actions')]: true
			}
		}
	},
	computed: {
		patchAdjustStatusFinish() {
			return this.globalDics.patchAdjustStatusFinish || []
		}
	},
	created() {
		this.initIndexDB('agentTopupReviewRecord', this.activityListField)
	},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		timeTurner(time) {
			var day = Math.floor(time / 86400) // 整数部分代表的是天；一天有24*60*60=86400秒 ；

			time = time % 86400 // 余数代表剩下的秒数；

			var hour = Math.floor(time / 3600) // 整数部分代表小时；

			time %= 3600 // 余数代表 剩下的秒数；

			var minute = Math.floor(time / 60)

			time %= 60

			var str = `${day > 0 ? day + 'd' : ''}${
				hour > 0 || day ? hour + 'h' : ''
			}${minute > 0 || hour ? minute + 'm' : ''}${time}s`
			return str
		},
		loadData() {
			// this.loading = true
			const [startTime, endTime] = this.formTime.time || []
			// todo api接口有{orderKey， orderType}两个字段，当前请求没有需要核对
			let params = {
				...this.queryData,
				eventTimeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				eventTimeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.fundsAuthRecordsProxyAddAudit(params)
				.then((res) => {
					if (res.code === 200) {
						const response = res.data
						this.loading = false
						this.dataList = response.record
						if (this.dataList) {
							this.dataList.forEach((item) => {
								item.lockStatus = Number(item.lockOrder) === 1
							})
						}
						this.total = response.totalRecord
					} else {
						this.loading = false
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		goDetail(row) {
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.queryData = {
				id: undefined,
				userName: undefined,
				orderStatus: undefined
			}
			this.formTime = {
				time: [start(), end()]
			}
			this.loadData()
		},
		reloadTime() {
			this.formTime = {
				time: [start(), end()]
			}
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			this.dialogColumnData = {
				// 申请时间: true,
				// 申请人: true,
				// 代理账号: true,
				// 所属商户: true,
				// 调整类型: true,
				// 申请金额: true,
				// 订单状态: true,
				// 审核时间: true,
				// 审核用时: true,
				// 审核人: true,
				// 操作: true
				[this.$t('funds.apply_time')]: true,
				[this.$t('funds.fund_audit.operator')]: true,
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('funds.fund_audit.adjust_type')]: true,
				[this.$t('funds.fund_audit.order_amount')]: true,
				[this.$t('funds.fund_audit.order_status')]: true,
				[this.$t('funds.fund_audit.audit_time')]: true,
				[this.$t('funds.fund_audit.audit_cost')]: true,
				[this.$t('funds.fund_audit.lock_account')]: true,
				[this.$t('common.actions')]: true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
</style>
